<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,
              maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" 
              href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.css">
        <link rel="stylesheet" 
              href="http://api.maps.nokia.com/mobile/1.0.2/lib/colors.css">
    </head>
    <body class="mh5_hwacc_body">
        <script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">
        </script>

        <div id="mapContainer"
             style="height: 480px;position: relative; overflow-y: scroll;">
        </div>

        <script>
            nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/1.0.2/lib/";
            nokia.mh5.appId = "WWBhk8vY55zMEt183rtB";
            nokia.mh5.appCode = "QDGrEnrAI3W1urgWR-ei3Q";
            var currentPoi;
            var map = new nokia.mh5.components.Map({
                center: {
                    longitude: locator.getLongitude(),
                    latitude: locator.getLatitude()
                },
                zoom: 15,
                schema: "normal.day.traffic",
                tracking: true,
                positionButton: {
                    onClick: function(e) {
                        if (currentPoi !== null) {
                            map.removePoi(currentPoi);
                        }
                        map.createPoi(
                                "imgs/ic_map_wifi_current.png", {
                            longitude: locator.getLongitude(),
                            latitude: locator.getLatitude(),
                            name: "current position"
                        });
                        map.moveTo({longitude: locator.getLongitude(),
                            latitude: locator.getLatitude()});
                    }
                },
                listeners: {
                    poiclick: function(e) {/* your listener */
                        this.showInfoBubble(e.data[0]);
                    },
                    mapmovestart: function() {/* your listener */
                    },
                    mapmoveend: function() {/* your listener */
                    },
                    mapclick: function(e) {
//                        nokia.mh5.components.InfoBubble(poi, {
//                            content: ["title", "description", "rating"],
//                            borderRadius: 12,
//                            backgroundColor: "rgba (0,46,184,0.85)",
//                            maxWidth: 245
//                        }, function(b) {
//
//                        });
                    },
                    mapdblclick: function(e) {/* your listener */
                    },
                    maplongpress: function(e) {/* your listener */
                    },
                    maptrackingstart: function() {/* your listener */
                    },
                    maptrackingend: function() {/* your listener */
                    },
                    mapzoomchange: function(e) {/* your listener */
                    }
                }
            });
            map.createPoi(
                    "imgs/ic_map_wifi_current.png", {
                longitude: locator.getLongitude(),
                latitude: locator.getLatitude(),
                name: "current position"
            });
            var apdata = apadapter.getAllApInfo();
            var APArray = JSON.parse(apdata);
            for (var i = 0; i < APArray.length; i++) {
                var item = APArray[i];
                var img;
                if (item.type === "0") {
                    img = "imgs/ic_map_wifi_free.png";
                } else {
                    img = "imgs/ic_map_wifi_lock.png";
                }
                map.createPoi(
                        img, {
                    longitude: item.longitude,
                    latitude: item.lantitude,
                    name: "ssid:" + item.ssid
                });
            }


            document.getElementById("mapContainer").appendChild(map.root);

        </script>
    </body>
</html>